<template>
	<div class="order">
		<back :title="title"></back>
		<noorder v-show="isShow"></noorder>
	   <div class="contents" v-for="item in shopList" @click="goNext(item)">
	   	<p class="status">{{status}}</p>
	       <div class="goodsList">	       	
	           <div class="left">
	           	  <img :src="item.thumbnail" />
	           </div>
	           <div class="right">
	           	<p class="title">{{item.productName}}</p>
	           	<p><span>租赁押金：</span><span style="color: #FF0000;">￥{{item.deposit}}元</span></p>
	           	<p><span>租赁价格：</span><span style="color: #FF0000;">￥{{item.rentPrice}}元/每天</span></p>    
	           	<p v-if="item.favourableAmount"><span>预付租金：</span><span>{{item.favourableAmount}}元</span></p>	
	           </div>
	       </div>
	       <div class="details">
	       	<p class="shortDesc">【{{item.shortDesc}}】</p>
	       </div>
	   </div>
	</div>
</template>

<script>
import back from '@/components/m-shop/m-store/back'
import noorder from '@/components/m-noorder/noorder'

export default {
	name: 'order',
	components: {
		back,
		noorder
	},
	data() {
		return {
			shopList: [],
			title: '我的订单',
			isShow: false,
			status: '',
			shop_url: '',
			sort: 0
		}
	},
	created() {
		this.status = ""
		this.shop_url = ""
		this.getList()
	},
	mounted() {

	},
	methods: {
		chonsePramas(item) {
			this.shop_url = item.path;
			this.status = item.title;			
			this.getList();
			this.shopList = [];
		},
		//获取数据
		getList() {
				this.status = this.$route.query.status;
				this.shop_url = this.$route.query.shop_url
				this.$http.get(this.$store.state.reqUrl + this.shop_url, {
					params:{
						shopId:this.$store.state.shop_id,
						statu:this.$route.query.statu
					}
			}).then(res => {
				if(res.data.list.length === 0) {
					this.isShow = true;
				} else {
					this.isShow = false;
					this.shopList = res.data.list;
				}
			})
		},
		goNext(item) {
			this.$router.push({
				path: "/orderInformation",
				query: {
					shop_url: this.$route.query.shop_url,
					shop_rentSerial: item.rentSerial,
					order_name: this.$route.query.order_name
				}
			});
		}
	}
}
</script>

<style lang="less" scoped>
    .order {
    	width: 100%;
    	margin-top: 100px;
    	.contents {
    		width: 100%;
    		background: #FFFFFF;
    		margin-bottom: 15px;
    		.status{
    				color: #FF0000;
    				text-align: right;
    				font-size: 24px;
    				padding: 20px 30px 0 0;
    			}
    		.goodsList {
    			display: flex;
    			padding: 20px 30px;    			
    			.left {
    				width: 250px;
    				height:150px;
    				img {
    					width: 100%;
    					height: 100%;
    					border-radius: 8px;
    				}
    			}
    			.right {
    				flex: 1;
    				font-size: 28px;
    				color: dimgrey;
    				margin-left: 20px;
    				.title {
    					font-size: 30px;
    					color: #000000;
    					margin-bottom: 20px;
    					font-weight: 800;
    				}
    				.shortDesc{
    					line-height: 30px;
    				}
    			}
    		}
    		.details{
    			font-size: 26px;
    			p{
    				padding:20px 20px 35px 20px;
    			}
    		}
    	}
    }
</style>